{% extends 'layout/basic.html' %}
{% load static %}

{% block title %} 短信登录 {% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}
    <div class="container account">
        <h3>短信登录</h3>
        <form id="loginSms" onsubmit="return false" action="##" method="post">
            {% csrf_token %}
            {% for feild in form %}
                {% if feild.name != 'code' %}
                <div class="form-group">
                    <label for="{{ feild.id_for_label }}">{{ feild.label }}</label>
                    {{ feild }}
                    <span class="error-msg"></span>
                </div>
                {% else %}
                    <div class="form-group">
                    <label for="{{ feild.id_for_label }}">{{ feild.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0">
                            {{ feild }}
                            <span class="error-msg"></span>
                        </div>
                        <div class="col-md-6">
                            <input type="button" class="btn btn-default" value="点击获取验证码" id="btnSms">
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
            <div>
                <div style="float: right; padding-top: 10px;"><a href="{% url 'login' %}">用户名密码登录?</a></div>
            </div>
            <button type="button" class="btn btn-primary" id="btmSubmit">登 录</button>
        </form>
    </div>

{% endblock %}

{% block js %}
    <script>

    $(function () {
        bindBtnSms();
        bindBtnSubmit();

    });

    function bindBtnSms() {
        $('#btnSms').click(function () {
            $('.error-msg').empty();
            let mobilePhone = $("#id_mobile_phone").val();
            {#alert(mobilePhone);#}
            $.ajaxSetup({
              data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
            $.ajax({
                url: '{% url "send_sms" %}',
                method: 'POST',
                data: {
                    mobile_phone: mobilePhone,
                    tpl: "login"
                },
                success: function (res) {
                    if (res.status){
                        resetTime();
                    }
                    else {
                        console.log(res.err);
                        $.each(res.err, function (k, v) {
                            $("#id_" + k).next().text(v[0]);
                            console.log(v[0])

                        })
                    }

                }
            })
        })
    }

    function resetTime(){
        let second = 60;
        let timer = null;
        timer = setInterval(function(){
            second -= 1;
            let $btnSms = $("#btnSms");
            if(second >0){
                $btnSms.prop('disabled',true);
                $btnSms.val(second + "秒后获取验证码");
            }else{
                clearInterval(timer);
                $btnSms.prop('disabled',false);
                $btnSms.val("点击获取验证码");
            }
        },1000);
    }

    function bindBtnSubmit() {
        $("#btmSubmit").click(function () {
            $('.error-msg').empty();
            $.ajax({
                url: '{% url "login_sms" %}',
                method: 'POST',
                dataType: "json",
                data: $("#loginSms").serialize(),

                success: function (res) {
                    if (res.status){
                        location.href = res.data
                    }
                    else {
                        console.log(res.err);
                        $.each(res.err, function (k, v) {
                            $("#id_" + k).next().text(v[0]);
                            console.log(v[0]);
                        })
                    }

                }
            })
        })
    }
    </script>
{% endblock %}